<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="blog/index/include_blog::header"></head>
<body class="user-select">
<header class="header">
    <nav th:include="blog/index/include_blog::nav" class="navbar navbar-default" id="navbar1"
         style="opacity: 0.9;z-index: 9999;"></nav>
</header>
<section class="container" id="detail">
    <input id="cid" type="hidden" th:value="${cid}" />
    <div class="content-wrap">
        <div class="content">
            <header class="article-header">
                <h1 class="article-title"><a href="javascript:;" :title="content.title">{{content.title}}</a></h1>
                <div class="article-meta">
                    <span class="item article-meta-time">
                        <time class="time" data-toggle="tooltip" data-placement="bottom" :title="content.gtmCreate"><i class="glyphicon glyphicon-time"></i> {{content.gtmCreate}}</time>
                    </span>
                    <span class="item article-meta-category" data-toggle="tooltip" data-placement="bottom" title="资讯分享"><i class="glyphicon glyphicon-list"></i>
                        <a href="" title="资讯分享">资讯分享</a>
                    </span>
                    <span class="item article-meta-views" data-toggle="tooltip" data-placement="bottom" :title="content.hits"><i class="glyphicon glyphicon-eye-open"></i>
                        {{content.hits}}
                    </span>
                    <span class="item article-meta-comment" data-toggle="tooltip" data-placement="bottom" title="评论量"><i class="glyphicon glyphicon-comment"></i>
                        0
                    </span>
                </div>
            </header>
            <div class="article-tags" id="tags">标签：
                <a :href="['/blog/tag/list/']" rel="tag" v-for="item in tags" >{{item}}</a>
            </div>
            <div class="relates">
                <div class="title">
                    <h3>相关推荐</h3>
                </div>
                <ul>
                    <li v-for="item in relevant">
                        <a :href="['/blog/detail?cid='+item.cid]" :title="item.title">{{item.title}}</a>
                    </li>
                </ul>
            </div>
            <div class="title" id="comment">
                <h3>评论</h3>
            </div>
            <div id="respond">
                <form id="comment-form" name="comment-form" action="" method="POST">
                    <div class="comment">
                        <input name="author" id="author" class="form-control" size="22" placeholder="您的昵称（必填）" maxlength="15" autocomplete="off" type="text" tabindex="1">
                        <input name="email" id="email" class="form-control" size="22" placeholder="您的邮箱（必填）" maxlength="88" autocomplete="off" type="text" tabindex="2">
                        <input name="url" id="url" class="form-control" size="22" placeholder="您的网址（非必填）" maxlength="58" autocomplete="off" type="text" tabindex="3">
                        <div class="comment-box">
                            <textarea placeholder="您的评论或留言（必填）" name="comment-textarea" id="comment-textarea" cols="100%" rows="3" tabindex="4"></textarea>
                            <div class="comment-ctrl">
                                <div class="comment-prompt" style="display: none;"> <i class="fa fa-spin fa-circle-o-notch"></i> <span class="comment-prompt-text">评论正在提交中...请稍后</span> </div>
                                <div class="comment-success" style="display: none;"> <i class="fa fa-check"></i> <span class="comment-prompt-text">评论提交成功...审核通过后显示</span> </div>
                                <button type="submit" name="comment-submit" id="comment-submit" tabindex="5">评论</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div id="postcomments">
                <ol id="comment_list" class="commentlist">
                </ol>
            </div>
        </div>
    </div>
    <aside class="sidebar">
        <div th:include="blog/index/include_blog::aside"></div>
    </aside>
</section>
<div th:include="blog/index/include_blog::footer"></div>
<script type="text/javascript">
    var nes = new Vue({
        el: '#detail',
        mounted:function(){
            this.$nextTick(function () {
                this.createView();
            });
        },
        data: {
            content:[],
            relevant:[],
            cid:$('#cid').val(),
            tags:[]
        },
        methods: {
            createView:function () {
                this.$http.get('/blog/get/article',{'cid':this.cid}).then(res=>{
                    if (res.status == 200 && res.data.code == 0){
                        this.content = res.data.contentDO;
                        var tag = res.data.contentDO.tags.split(',');
                        this.tags = tag;
                        var data = {tags:tag[0],offset:0, limit:8, sort:'cid'};
                        this.$http.get('/blog/list',data).then(res=>{
                            if (res.status == 200){
                                this.relevant = res.data.rows;
                            }
                        });
                    }
                });
            },
        },
    });
</script>
</body>
</html>
